<template>
  <div>
    <van-nav-bar title="搜索列表" left-arrow @click-left="onClickLeft" />
    <van-card v-for="(item,index) in list" :key="index" :thumb="item.img">
      <template #title>
        <div class="item-title">{{item.title}}</div>
      </template>
    </van-card>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      kw: this.$route.query.kw, //搜索关键字
      list: [], //所有数据
    };
  },
  mounted() {//挂载
    // 请求数据
    this.$axios.get("http://localhost:8080/data.json").then((res) => {
      this.list = res.data.data;
    });
  },
  methods: {
    onClickLeft() {
      //返回搜索首页
      this.$router.push({
        path: "/About",
      });
    },
  },
  computed: {//计算属性
    selChange() {
      // 把请求回来的数据过滤，然后显示
      var news = this.shop.filter((item) => {
        if (item.title.indexOf(this.kw) != -1) {
          return item;
        }
      });
      return news;
    },
  },
};
</script>
 
<style scoped>
.item-title {
  height: 88px;
  font-size: 18px;
  /* background: red; */
  display: flex;
  align-items: center;
}
</style>